<style lang="scss" scoped>
.flowControl {
    overflow: hidden;
    .item{
        cursor: pointer;
        position: relative;
        &::after{
            content: "";
            width:170%;
            background: #DFDFDF;
            height: 2px;
            display: block;
            position:absolute;
            right:-170%;
            top: 50%;
        }
    }
    .item:last-child::after{
        content: none;
    }
    .illustration{
        display: flex;
        justify-content: space-between;
        .pic img{
            max-width:600px;
        }
        .txt{
            width:500px;
            text-align: left;
            margin: 50px;
            h5{
                margin: 20px 0;
                // line-height: 40px;
                color: #383838,
            }
            p{
                color: #666;
            }
        }
    }
    
}
</style>

<template>
    <div class="flowControl container">
        <a id="flowControl"></a>
        <div class="row flex between" style="margin:50px auto;">
            <div class="item"  v-for="v in 5" @mouseover="hover=v" :key="v">
                <img :src="hover===v?require(`@/assets/box4-${v}-hover.svg`):require(`@/assets/box4-${v}.svg`)">
            </div>
        </div>
        <div class="row illustration flex between">
            <div class="pic">
                <img :src="require(`@/assets/box4_banner${hover}.png`)" >
            </div>
            <div class="txt">
                <h2>{{txt[hover-1][0]}}</h2>
                <h5>{{txt[hover-1][1]}}</h5>
                <p>{{txt[hover-1][2]}}</p>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            hover:1,
            txt:[
                ['快速申请专利','采用科学的申请步骤，最大化减少申请难度；','根据不同的专利类型的特点，对申请步骤进行了细致的优化，最大化的实现自动化和辅助填写，实现各种类型专利快速申请。'],
                ['专利申请进度查询','多种查询渠道，迅速了解专利所处状态','专利申请后，随时可以查阅专利申请进度，查看所在的阶段和状态，重要阶段和节点会进行手机短信通知，以防错过重要的事件。'],
                ['补正和答复','当专利需要补正和答复时，自动通知代理人完成补正和答复，减少额外沟通成本','专利申请过程中，可能会因为申请资料不能让审查员完全理解发明是什么的情况下，就需要提交补正和答复，当专利需要补正和答复时，系统会自动通知代理人进行处理，您只需及时确认相关稿件即可。'],
                ['年费监控','再也不用担心，专利到期因为忘记续费而失效，提醒短信月度提醒、到期提醒准时发送；','派智系统自动为您的专利进行年费监控，当专利快要缴纳年费的时候，及时给您发送短信通知，让您提前做好准备，防止产生滞纳金和专利失效。'],
                ['老客户托管','老客户的资料不想丢，一次性导入到平台，即可享受年费监控。','手中掌握了大量的老客户的信息，维护起来很困难，使用年费监控模板，一键导入派智提供，从此让系统帮您维护。'],
            ]
        }
    }
}
</script>

